<template>  
  <view class="container">  
    <view class="cycling-info">  
      <text class="info-title">骑行信息</text>  
      <view class="info-columns">  
        <view class="info-column">  
          <view class="info-block">  
            <text class="highlight">{{ formatTime(time) }}</text>  
            <text class="info-label">骑行时间</text>  
          </view>  
          <view class="info-block">  
            <text class="highlight">{{ distance.toFixed(2) }} km</text>  
            <text class="info-label">骑行距离</text>  
          </view>  
          <view class="info-block">  
            <text class="highlight">{{ speed.toFixed(2) }} km/h</text>  
            <text class="info-label">当前速度</text>  
          </view>  
        </view>  
        <view class="info-column">  
          <view class="info-block">  
            <text class="highlight">{{ calories }} kcal</text>  
            <text class="info-label">消耗卡路里</text>  
          </view>  
          <view class="info-block">  
            <text class="highlight">{{ elevation }} m</text>  
            <text class="info-label">海拔</text>  
          </view>  
          <view class="info-block">  
            <text class="highlight">{{ ascent }} m</text>  
            <text class="info-label">爬升</text>  
          </view>  
        </view>  
      </view>  
      <view class="info-block">  
        <text class="highlight">{{ currentLocation }}</text>  
        <text class="info-label">当前位置</text>  
      </view>  
    </view>  

    <view class="button-group">  
      <button class="btn" @click="startCycling">开始骑行</button>  
      <button class="btn" @click="endCycling">结束骑行</button>  
      <button class="btn" @click="shareResults" v-if="isCycling">分享结果</button>  
    </view>  

    <map class="map" id="map" @load="onMapLoad"></map>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      distance: 0,  
      time: 0,  
      calories: 0,  
      speed: 0,  
      elevation: 0,  
      ascent: 0,  
      isCycling: false,  
      interval: null,  
      currentLocation: '获取中...', // 当前位置信息  
    };  
  },  
  methods: {  
    startCycling() {  
      this.isCycling = true;  
      this.distance = 0;  
      this.time = 0;  
      this.calories = 0;  
      this.speed = 0;  
      this.elevation = 0;  
      this.ascent = 0;  

      this.getLocation(); // 开始骑行时获取位置  

      this.interval = setInterval(() => {  
        this.time += 1;   
        this.updateSpeed();  
        this.distance += this.speed / 60;   
        this.calories = Math.floor(this.distance * 50);   
        this.updateElevation();   
        this.getLocation(); // 定时更新位置  
      }, 60000);   
    },  
    endCycling() {  
      this.isCycling = false;  
      clearInterval(this.interval);  
      this.saveRideRecord();  
    },  
    updateSpeed() {  
      this.speed = Math.random() * 20 + 5;   
    },  
    updateElevation() {  
      this.elevation = Math.random() * 100;   
      this.ascent = Math.random() * 10;   
    },  
    formatTime(seconds) {  
      const minutes = Math.floor(seconds / 60);  
      const secs = seconds % 60;  
      return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;  
    },  
    shareResults() {  
      console.log("分享骑行结果:", {  
        distance: this.distance,  
        time: this.time,  
        calories: this.calories,  
      });  
    },  
    saveRideRecord() {  
      console.log("保存骑行记录:", {  
        distance: this.distance,  
        time: this.time,  
        calories: this.calories,  
      });  
    },  
    onMapLoad() {  
      console.log("地图加载成功，可以开始定位...");  
    },  
    getLocation() {  
      // 使用地理位置 API 获取当前位置  
      if (navigator.geolocation) {  
        navigator.geolocation.getCurrentPosition((position) => {  
          const { latitude, longitude } = position.coords;  
          this.currentLocation = `纬度: ${latitude.toFixed(4)}, 经度: ${longitude.toFixed(4)}`;  
        }, (error) => {  
          console.error("获取位置失败:", error);  
          this.currentLocation = "位置获取失败";  
        });  
      } else {  
        this.currentLocation = "不支持地理位置服务";  
      }  
    },  
  },  
};  
</script>  

<style>  
.container {  
  padding: 20px;  
  background-color: #f0f8ff;  
  min-height: 100vh;  
}  

.cycling-info {  
  margin: 20px 0;  
  padding: 10px;  
  background-color: white;  
  border-radius: 10px;  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  
}  

.info-title {  
  font-size: 24px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  

.info-columns {  
  display: flex;  
  justify-content: space-between;  
}  

.info-column {  
  flex: 1;  
  margin-right: 10px;  
}  

.info-column:last-child {  
  margin-right: 0;  
}  

.info-block {  
  margin: 10px 0;   
  padding: 10px;  
  background-color: #f9f9f9;   
  border-radius: 5px;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  
  text-align: center;   
  display: flex;  
  flex-direction: column;   
  align-items: center;   
}  

.info-label {  
  font-weight: normal;   
}  

.highlight {  
  color: #4caf50;  
  font-size: 20px;   
  font-weight: bold;  
}  

.button-group {  
  display: flex;  
  justify-content: center;  
  margin-bottom: 20px;  
}  

.map {  
  width: 100%;  
  height: 300px;  
  border-radius: 10px;  
  overflow: hidden;  
}  
</style>